<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

    <head>

        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title>Bootstrap Login Form Template</title>

        <!-- CSS -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500"/>
        <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="/assets/font-awesome/css/font-awesome.min.css"/>
		<link rel="stylesheet" href="/assets/css/form-elements.css"/>
        <link rel="stylesheet" href="/assets/css/style.css"/>

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- Favicon and touch icons -->
        <link rel="shortcut icon" href="/assets/ico/favicon.png"/>
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/assets/ico/apple-touch-icon-144-precomposed.png"/>
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/ico/apple-touch-icon-114-precomposed.png"/>
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/assets/ico/apple-touch-icon-72-precomposed.png"/>
        <link rel="apple-touch-icon-precomposed" href="/assets/ico/apple-touch-icon-57-precomposed.png"/>

    </head>

    <body>

        <!-- Top content -->
        <div class="top-content">
        	
            <div class="inner-bg">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-8 col-sm-offset-2 text">
                            <h1><strong>Bootstrap</strong> Login Form</h1>
                            <div class="description">
                            	<p>
	                            	This is a free responsive login form made with Bootstrap. 
	                            	Download it on <a href="#"><strong>AZMIND</strong></a>, customize and use it as you like!
                            	</p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3 form-box">
                        	<div class="form-top">
                        		<div class="form-top-left">
                        			<h3>Login to our site</h3>
                            		<p>Enter your username and password to log on:</p>
                        		</div>
                        		<div class="form-top-right">
                        			<i class="fa fa-lock"></i>
                        		</div>
                            </div>
                            <!--action="/foreground/tbBlogger/signinbyUAP" method="post"-->
                            <div class="form-bottom">
			                    <form role="form"  th:id="signin" class="login-form" action="/foreground/tbBlogger/registTbBlogger" method="post">
                                    <div class="form-group">
                                        <label class="sr-only" for="name">Username</label>
                                        <input type="text" id="name" name="name" placeholder="name..." class="form-username form-control" />
                                    </div>
			                    	<div class="form-group">
			                    		<label class="sr-only" for="username">Username</label>
			                        	<input type="text" id="username" name="username" placeholder="Username..." class="form-username form-control" />
			                        </div>
			                        <div class="form-group">
			                        	<label class="sr-only" for="password">Password</label>
			                        	<input type="password" id="password" name="password" placeholder="Password..." class="form-password form-control" />
			                        </div>
                                    <div class="form-group">
                                        <label class="sr-only" for="introduce">Introduce</label>
                                        <input type="text" id="introduce" name="introduce" placeholder="Introduce..." class="form-username form-control" />
                                    </div>
                                    <div class="form-group">
                                        <label class="sr-only" for="region">Region</label>
                                        <input type="text" id="region" name="region" placeholder="Region..." class="form-username form-control" />
                                    </div>
                                    <div class="form-group">
                                        <label class="sr-only" for="career">Career</label>
                                        <input type="text" id="career" name="career" placeholder="Career..." class="form-username form-control" />
                                    </div>
			                        <button type="submit" id="submitbutton" class="btn">Sign in!</button>
			                    </form>
		                    </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3 social-login">
                        	<h3>...or login with:</h3>
                        	<div class="social-login-buttons">
	                        	<a class="btn btn-link-2" href="#">
	                        		<i class="fa fa-facebook"></i> Facebook
	                        	</a>
	                        	<a class="btn btn-link-2" href="#">
	                        		<i class="fa fa-twitter"></i> Twitter
	                        	</a>
	                        	<a class="btn btn-link-2" href="#">
	                        		<i class="fa fa-google-plus"></i> Google Plus
	                        	</a>
                        	</div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>


        <!-- Javascript -->
        <script src="/assets/js/jquery-1.11.1.min.js"></script>
        <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
        <script src="/assets/js/jquery.backstretch.min.js"></script>
        <script src="/assets/js/scripts.js"></script>
        
        <!--[if lt IE 10]>
            <script src="/assets/js/placeholder.js"></script>
        <![endif]-->
        <!--<script>-->
            <!--// var options = {-->
            <!--//     dataType:JSON,-->
            <!--//          //提交后的回调函数-->
            <!--//     url: "/foreground/tbBlogger/signinbyUAP",-->
            <!--//     type: "POST",               //默认是form的method（get or post），如果申明，则会覆盖-->
            <!--//     //dataType: null,           //html(默认), xml, script, json...接受服务端返回的类型-->
            <!--//     //clearForm: true,          //成功提交后，清除所有表单元素的值-->
            <!--//     //resetForm: true,          //成功提交后，重置所有表单元素的值-->
            <!--//     timeout: 3000,-->
            <!--//     success: function (Callback) {-->
            <!--//         alert(Callback);-->
            <!--//         window.location.href="http://localhost/index";-->
            <!--//         // if (Callback.status==200){-->
            <!--//         //     alert("成功提交")-->
            <!--//         //     location.href="http://localhost/index";-->
            <!--//         // }else if(Callback.status==201){-->
            <!--//         //     alert(Callback.message+"提交失败");-->
            <!--//         // }else {-->
            <!--//         //     location.href="http://localhost/index";-->
            <!--//         // }-->
            <!--//-->
            <!--//     }//限制请求的时间，当请求大于3秒后，跳出请求-->
            <!--// }-->
            <!--// $("#form").ajaxForm(options);-->
            <!--// $('#form').submit(function() {-->
            <!--//     $(this).ajaxSubmit(options);-->
            <!--//     // return false; //阻止表单默认提交-->
            <!--// });-->
            <!--$("#submitbutton").click(function () {-->

                <!--$.ajax({-->
                    <!--type: "POST",   //提交的方法-->
                    <!--url:"/foreground/tbBlogger/signinbyUAP", //提交的地址-->
                    <!--data:{"username":$("#username").val(),"password":$("#password").val()},-->
                    <!--async: false,-->
                    <!--error: function(request) {  //失败的话-->
                        <!--alert("Connection error");-->
                    <!--},-->
                    <!--success: function(data) {  //成功-->
                        <!--if(200==data.status) {-->
                            <!--window.location.href="http://localhost/index.html"-->
                        <!--}else if(201==data.status){-->
                            <!--window.location.href="#";-->
                            <!--alert(data.message);-->
                        <!--}else{-->
                            <!--window.location.href="#";-->
                            <!--alert(data.message);-->
                        <!--}-->
                    <!--}-->
                <!--});-->
            <!--});-->

        <!--</script>-->

    </body>

</html>